export const snakes = [];

export default class Snake {
  oldPosition = {};
  constructor(app, options) {
    this.$app = app;
    this.$options = Object.assign(
      {
        bgColor: '#333',
      },
      options
    );

    this.$el = this.element();
    snakes.push(this);
  }

  element() {
    const div = document.createElement('div');
    div.classList.add('snake');
    const { bgColor, left, top } = this.$options;
    const { box } = this.$app.$options;
    div.style.backgroundColor = bgColor;
    div.style.borderColor = bgColor;
    div.style.width = box.width + 'px';
    div.style.height = box.height + 'px';
    div.style.left = left + 'px';
    div.style.top = top + 'px';
    return div;
  }

  // 设置
  set left(value) {
    this.oldPosition.left = this.left;
    this.$el.style.left = value + 'px';
  }
  set top(value) {
    this.oldPosition.top = this.top;
    this.$el.style.top = value + 'px';
  }
  get left() {
    return this.$el.offsetLeft;
  }
  get top() {
    return this.$el.offsetTop;
  }

  static get left() {
    return snakes[0].$el.offsetLeft;
  }
  static get top() {
    return snakes[0].$el.offsetTop;
  }
}
